<template>
  <div class="share-it">
    <div class="share-header">
      <div class="share-header-title">分享好友越多，收益越多</div>
      <div class="flex-row justify-content-center align-items-center center-seamless-scroll">
        <div style="height:100px;overfolw:hidden;  min-width: 400px;">
          <vue-seamless-scroll
            :data="listData"
            class="seamless-warp"
            @ScrollEnd="ScrollEnd"
            :class-option="options"
          >
            <ul class="item">
              <li v-for="(item,index) in listData" :key="index">
                <span class="title" v-text="item.title"></span>
                <span class="date" v-text="item.describe"></span>
                <span class="date" v-text="item.num+'元'"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="QR-code">
          <div id="qrCode" ref="qrCodeDiv"></div>
          <p>我的分享二维码</p>
        </div>
      </div>
    </div>
    <div>
      <div>
        <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
          <el-table-column prop="nickName" label="用户昵称"></el-table-column>
          <el-table-column prop="uid" label="UID"></el-table-column>
          <el-table-column prop="created_at" label="注册时间"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.meta.total"
        :page-size="this.meta.per_page"
        @current-change="handleCurrentChange"
        v-show="tableData.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      tableData: [],
      listData: [],
      meta: { current_page: 1, per_page: 20 },
      scorllMeta: { current_page: 0, per_page: 40 },
      loading: true,
      type: 1,
      sort: 'DESC'
      // QRCodeSrc: ""
    }
  },
  computed: {
    uuid () {
      return sessionStorage.getItem('u')
    },
    options () {
      return {
        step: 0.5,
        openTouch: false,
        singleHeight: 26,
        hoverStop: false
      }
    }
  },
  created () {
    this.getUserInfo()
    this.getInvitation()
    this.getIntegral()
    // this.$nextTick(()=>{
    //   this.bindQRCode()
    // })
    // setTimeout(() => {
    //   this.bindQRCode();
    // }, 1000);
  },
  mounted () {},
  watch: {},
  methods: {
    ScrollEnd () {
      this.getIntegral()
    },
    handleCurrentChange (val) {
      this.loading = !this.loading
      this.meta.current_page = val
      this.getInvitation()
    },
    getUserInfo () {
      let rsaStr = `uuid=${this.uuid}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getUserInfo(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.QRCodeSrc = `http://47.105.207.235/home/share/index?invite_code=${res.data.result.data.invite_code}&qrcode=user&name=JSS059M`
              this.bindQRCode()
              // this.integral = res.data.result.data.integral;
              // this.quarter_contribution =
              //   res.data.result.data.quarter_contribution;
              // this.total_contribution = res.data.result.data.total_contribution;
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    },
    getInvitation () {
      let rsaStr = `page=${this.meta.current_page}&page_size=${this.meta.per_page}&sort=DESC`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getInvitation(rsaCode)
          .then(res => {
            this.loading = !this.loading
            if (res.data.errno === '000') {
              this.tableData = res.data.result.data
              this.meta = res.data.result.meta
              // this.QRCodeSrc = res.data.result.data.avatar;
              // this.integral = res.data.result.data.integral;
              // this.quarter_contribution =
              //   res.data.result.data.quarter_contribution;
              // this.total_contribution = res.data.result.data.total_contribution;
            } else {
              this.tableData = []
              this.meta = { current_page: 1, per_page: 20 }
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    },
    getIntegral () {
      let page = this.scorllMeta.current_page + 1
      let rsaStr = `type=${this.type}&page=${page}&page_size=${this.scorllMeta.per_page}&sort=${this.sort}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getIntegral(rsaCode)
          .then(res => {
            // console.log(res);
            if (res.data.errno === '000') {
              this.listData = res.data.result.data
              this.scorllMeta = res.data.result.meta
            } else {
              this.scorllMeta = { current_page: 0, per_page: 40 }
            }
          })
          .catch(err => {})
      })
    },
    bindQRCode () {
      new this.$qrCode(this.$refs.qrCodeDiv, {
        text: this.QRCodeSrc,
        width: 120,
        height: 120,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: this.$qrCode.CorrectLevel.L // 容错率，L/M/H
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
.seamless-warp {
  height: 100px;
  overflow: hidden;
  font-size: 16px;

  ul {
    li {
      height: 20%;
      margin: 10px 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      span {
        display: flex;
        width: auto;
        margin: 0 20px;
      }
    }
  }
}
</style>
